/*
 * @Author: huangyingli
 * @Date: 2023-02-22 19:37:18
 * @LastEditors: huangyingli
 * @LastEditTime: 2023-02-28 13:02:05
 * @Description:
 */
import { Button, message } from 'antd';
import { useNavigate } from 'react-router-dom';

import {
  ComponentListRequest,
  ComponentPublish,
} from '../../api/conponentManage';
import { useEffect, useState } from 'react';

import ComponentCard from '../../components/ComponentCard';

import style from './ComponentManage.module.less';

export function ComManage() {
  const navigate = useNavigate();
  const [lists, setLists] = useState([]);

  function handleAdd() {
    navigate('/component-manage-handle');
  }
  useEffect(() => {
    ComponentListRequest().then(({ data }) => {
      console.log('组件数据', data);
      setLists(data.data);
    });
  }, []);
  const [messageApi, contextHolder] = message.useMessage();
  function handlePublish() {
    ComponentPublish().then(({ data }) => {
      messageApi.open({
        type: 'success',
        content: '组件发布成功',
      });
    });
  }
  return (
    <>
      {contextHolder}
      <div>
        <Button onClick={handleAdd} type='primary'>
          新增组件
        </Button>
        <Button onClick={handlePublish} type='primary' danger>
          构建发布
        </Button>

        <div className={style.list}>
          {lists.map((l) => (
            <ComponentCard name={l.name}></ComponentCard>
          ))}
        </div>
      </div>
    </>
  );
}
